Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.Panel',
    config: {
        fullscreen: true,
        layout: 'vbox',
        items: [
            {
                title: 'Header',
                style: 'background: #000000; padding: 10px; text-align: center',
                html: [
                    '<img src="http://st.nhacso.net/css/v60/images/graphics/logonhacso149x35.jpg" />'
                ].join("")
            }, 
            {
                selector: 'mainPanel',
                xtype  : 'tabpanel',
                tabBarPosition : 'bottom',
                listeners: {
                    activeitemchange: function(viewport, newCard, oldCard) {
                        if (newCard.id == 'homeTab') {
                            alert('welcome');
                        }
                        else if (newCard.id == 'libraryTab') {
                            
                        }
                        else if (newCard.id == 'searchTab') {
                            
                        }
                    }
                },
                items:[
                    {
                        xtype: 'homepanel'
                    },
                    {
                        id: 'libraryTab',
                        title: 'Library',
                        iconCls: 'favorites'
                    },
                    {
                        id: 'searchTab',
                        title: 'Search',
                        iconCls: 'search'
                    }
                ],
                flex: 1
            }
        ]
    }
});